<template>
  <div class="demo-progress">
    <!--    <el-row :gutter="0">-->
    <!--      <el-col :span="16">-->
    <el-select
        v-model="query.collegeId"
        filterable
        placeholder="请选择学院"
        @change="getByCollege"
    >
      <!--      @focus="getAllCollege()"-->
      <el-option
          v-for="item in options"
          :key="item.sid"
          :label="item.collegeName"
          :value="item.sid"
          :disabled="item.collegeName!=='全学院'? false:true"
      >
      </el-option>
    </el-select>
    <el-divider/>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="8">
        <el-card
            shadow="hover"
            :body-style="{ padding: '0px', display: flex }"
        >
          <template #header>
            <div class="clearfix">
              <span>报道情况</span>
            </div>
          </template>
          <div style="display:inline, padding-left: 10px;">
            <el-progress
                type="circle"
                :percentage="optionPie.finishProgress"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">报道进度</span>
              </template>
            </el-progress>
          </div>
          <div style="display: inline">
            <span>完成进度：{{ optionPie.finishProgress }}%</span><br/>
            <span>应报道人数：{{ optionPie.studentNum }}</span
            ><br/>
            <span>未完成人数：{{ optionPie.notNum }}</span
            ><br/>
            <span>已经预约人数：{{ optionPie.reserveNum }}</span
            ><br/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
            shadow="hover"
            :body-style="{ padding: '0px', display: flex }"
        >
          <template #header>
            <div class="clearfix">
              <span>宿舍分配情况</span>
            </div>
          </template>
          <div style=" padding-left: 10px;">
            <el-progress
                type="circle"
                :percentage="optionBed.finishProgress"
            >
              <template #header>
                <div class="clearfix">
                  <span>报道情况</span>
                </div>
              </template>
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">宿舍分配进度</span>
              </template>
            </el-progress>
          </div>
          <div style="display: inline">
            <span>完成进度：{{ optionBed.finishProgress }}%</span><br/>
            <span>应选分配数：{{ optionBed.studentNum }}</span
            ><br/>
            <span>未分配宿舍人数：{{ optionBed.notNum }}</span
            ><br/>
            <span>已经分配人数：{{ optionBed.reserveNum }}</span
            ><br/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
            shadow="hover"
            :body-style="{ padding: '0px', display: flex }"
        >
          <template #header>
            <div class="clearfix">
              <span>物资领取情况</span>
            </div>
          </template>
          <div style=" padding-left: 10px;">
            <el-progress
                type="circle"
                :percentage="optionGoods.finishProgress"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">物资领取进度</span>
              </template>
            </el-progress>
          </div>
          <div style="display: inline">
            <span>完成进度：{{ optionGoods.finishProgress }}%</span><br/>
            <span>应领取人数：{{ optionGoods.studentNum }}</span
            ><br/>
            <span>未领取人数：{{ optionGoods.notNum }}</span
            ><br/>
            <span>已经领取人数：{{ optionGoods.reserveNum }}</span
            ><br/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>各院系报道情况</span>
            </div>
          </template>

          <div v-for="item in tableData" :key="item.sid" class="badge">
            <div style="display: inline">{{ item.majorName }}</div>
            <div>
              <el-progress
                  :percentage="item.finishNum"
                  status="success"
                  :text-inside="true"
                  :stroke-width="20"
              />
            </div>
            <span style="display: inline"
            >{{ item.sumNum - item.notNum }}/{{ item.sumNum }}</span
            ><br/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>各院系宿舍分配情况</span>
            </div>
          </template>
          <div v-for="item in tableBedData" :key="item.sid" class="badge">
            {{ item.majorName }}
            <el-progress
                :percentage="item.finishNum"
                status="success"
                :text-inside="true"
                :stroke-width="20"
            />
            {{ item.sumNum - item.notNum }}/{{ item.sumNum }}<br/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>各院系物资领取情况</span>
            </div>
          </template>
          <div v-for="item in tableGoodsData" :key="item.sid" class="badge">
            {{ item.majorName }}
            <el-progress
                :percentage="item.finishNum"
                status="success"
                :text-inside="true"
                :stroke-width="20"
            />
            {{ item.sumNum - item.notNum }}/{{ item.sumNum }}<br/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {reactive, ref} from "vue";

import request from "../../utils/request";

export default {
  name: "progress",
  setup() {
    const query = reactive({
      collegeId: "",
    });
    const optionPie = ref({});
    const getMapData = () => {
      request.get("/reserve/progress", {
        params: query,
      }).then((res) => {
        optionPie.value = res.data;
      });
    };
    const optionBed = ref({});
    const getBedData = () => {
      request.get("/bed/progressBed", {
        params: query,
      }).then((res) => {
        optionBed.value = res.data;
      });
    };
    const optionGoods = ref({});
    const getGoodsData = () => {
      request.get("/receive/progressReceive", {
        params: query,
      }).then((res) => {
        optionGoods.value = res.data;
      });
    };
    const tableData = ref({});
    const getData = () => {
      request.get("/major/progressLengthVos", {
        params: query,
      }).then((res) => {
        tableData.value = res.data;
      });
    };
    const tableBedData = ref({});
    const getBedDataVo = () => {
      request.get("/major/getBedProgressLengthVos", {
        params: query,
      }).then((res) => {
        tableBedData.value = res.data;
      });
    };
    const tableGoodsData = ref({});
    const getGoodsDataVo = () => {
      request.get("/major/getGoodsProgressLengthVos", {
        params: query,
      }).then((res) => {
        tableGoodsData.value = res.data;
      });
    };
    //学院下拉框
    const options = ref([]);
    const getAllCollege = () => {
      console.log(query.collegeId);
      request.get("/college/getAllCollege").then((res) => {
        options.value = res.data;
        // getMajor;
      });
    };
    const getByCollege = () => {
      getMapData();
      getBedData();
      getData();
      getGoodsData();
      getBedDataVo();
      getGoodsDataVo();
    };
    getMapData();
    getBedData();
    getData();
    getGoodsData();
    getBedDataVo();
    getGoodsDataVo();
    getAllCollege()
    return {
      optionBed,
      optionPie,
      tableData, query, getByCollege,
      optionGoods, options, getAllCollege,
      tableBedData, getBedDataVo,
      getGoodsDataVo, tableGoodsData,
      getGoodsData,
      getData,
      getBedData,
      getMapData,
    };
  },
};
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.percentageName {
  display: inline;
  padding-left: 10%;
  /* margin-top: 10px; */
  font-size: 12px;
}

.pie_chart {
  height: 600px;
}

.map_chart {
  height: 600px;
}

.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.badge {
  display: inline;
  /* position: relative; */
  /* 相对元素原来的位置距离上边缘 50px */
  top: 5px;
  padding: 10px;
  padding-top: 2px;
  color: red;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.mgb20 {
  margin-bottom: 20px;
}
</style>
